<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    const {createRef} = React
    class App extends React.Component {
        dataInit = {
            userName: 'kasha',
            passWord: '111111',
            city: '5',
            sex: '2',
            hobby: ['1', '2', '4']
        }
        myForm = {
            userName: createRef(),
            passWord: createRef(),
            city: createRef(),
            sex: [createRef(),createRef()],
            hobby: [createRef(),createRef(),createRef(),createRef()],

        }
        submitHandler (e) {
            e.preventDefault()
            console.log('用户名', this.myForm.userName.current.value)
            console.log('密码', this.myForm.passWord.current.value)
            console.log('城市', this.myForm.city.current.value)
            console.log('性别', this.myForm.sex.find(v=>v.current.checked).current.value)
            console.log('爱好', this.myForm.hobby.filter(v=>v.current.checked).map(v=>v.current.value))
        }



        render() {
            return (
                <form onSubmit={this.submitHandler.bind(this)}>
                    <p>用户名：<input ref={this.myForm.userName} defaultValue={this.dataInit.userName} type="text" /></p>
                    <p>密码：<input ref={this.myForm.passWord} defaultValue={this.dataInit.passWord} type="password" /></p>
                    <p>
                        所在城市：
                        <select name="city" ref={this.myForm.city} defaultValue={this.dataInit.city} >
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                            <option value="3">武汉</option>
                            <option value="4">西安</option>
                            <option value="5">深圳</option>
                            <option value="6">南白滩</option>
                        </select>
                    </p>
                    <p>
                        性别：
                        <input type="radio" ref={this.myForm.sex[0]} defaultChecked={this.dataInit.sex==='1'} name={"sex"} value={1} />男
                        <input type="radio" ref={this.myForm.sex[1]} defaultChecked={this.dataInit.sex==='2'} name={"sex"} value={2} />女
                    </p>
                    <p>
                        爱好：
                        <input type="checkbox" ref={this.myForm.hobby[0]} defaultChecked={this.dataInit.hobby.includes('1')} name={"hobby"} value={1} />学习
                        <input type="checkbox" ref={this.myForm.hobby[1]} defaultChecked={this.dataInit.hobby.includes('2')} name={"hobby"} value={2} />电影
                        <input type="checkbox" ref={this.myForm.hobby[2]} defaultChecked={this.dataInit.hobby.includes('3')} name={"hobby"} value={3} />游戏
                        <input type="checkbox" ref={this.myForm.hobby[3]} defaultChecked={this.dataInit.hobby.includes('4')} name={"hobby"} value={4} />视频
                    </p>
                    <button>提交</button>
                </form>
            )
        }
    }





    root.render(<App />)
</script>

</html>